<template>
	<div class="jxtj">
		<div class="xj">
			<img src="jxtjimg/jxtj-01.png" />
			<span> 精选推荐 </span>
			<img src="jxtjimg/jxtj-02.png" />
		</div>
		<div class="jx">
			<div class="jx2" v-for="item in jxtjList" :key="item.id">
				<router-link to="/order">
					<div :style="{backgroundImage:'url('+item.imgURL+')',backgroundSize:'cover'}" class="div1">
						<p>{{item.name}}</p>
					</div>
					<div class="div2">
						{{item.ms}}
					</div>
					<div>
						<div class="float_left">
							<b>￥</b>
							<b>{{item.jg}}</b>
							起
						</div>
						<div class="float_right">
							{{item.ts}}
						</div>
					</div>
				</router-link>
			</div>
			<!-- <ul>
				<li :style="{backgroundImage:'url('+jxtjList[0].imgURL+')',backgroundSize:'cover'}">
					<router-link to="/">
						
					</router-link>
				</li>
				<li>2</li>
			</ul> -->
		</div>
	</div>
</template>

<script>
export default{
	name:'Jxtj',
	data(){
		return{
			jxtjList:[
				{ id:1 , imgURL:"jxtjimg/jxtj-03.jpg",ms:"[无限风光•老君山]12-2月，赏景圣地老君山&中岳嵩山，千年古刹少林寺，北方溶洞鸡冠洞，伏牛十里画屏，看少林功夫，日出云海星空（4日深度游，河南赏风光）",jg:1580,name:"休闲度假|郑州出发",ts:"4天3晚" },
				{ id:2 , imgURL:"jxtjimg/jxtj-04.jpg",ms:"[冰雪坝上 • 精致休闲]12-2月 冰雪童话世界 温泉酒店up/小地形越野穿越/乐享雪地火锅/感受塞北年味/畅玩冰雪乐园 古北水镇/坝上草原全景6日激情冰雪之旅",jg:3150,name:"休闲度假|北京出发",ts:"6天5晚" },
				{ id:3 , imgURL:"jxtjimg/jxtj-05.jpg",ms:"[冰雪阿尔山]12-2月沈阳，阿尔山国家森林公园，梦幻不冻河，查干湖冬捕，白狼镇雾凇长廊，鹿园，兴安敖包，乘坐雪国列车+打卡网红火车站+《亲爱的客栈》拍摄地，小众5日游",jg:3180,name:"|沈阳出发",ts:"5天4晚" },
				{ id:4 , imgURL:"jxtjimg/jxtj-06.jpg",ms:"[冰雪九寨环线]12-2月，避开旺季人群纷扰，邂逅冬日静谧九寨黄龙，撒欢毕棚沟，登达古冰川，两晚轻享九寨沟五星度假体验，打卡抖音同款华美达温泉酒店，冬游川西7日深度游！",jg:4080,name:"休闲度假|成都出发",ts:"7天6晚" },
				{ id:5 , imgURL:"jxtjimg/jxtj-07.jpg",ms:"[冰雪新疆]12-2月：雪国喀纳斯-水墨禾木-赛里木湖（蓝冰、冰泡）-人文伊宁-伊犁天鹅泉-独山子大峡谷-将军山滑雪场，品牌越野车/中巴考斯特+火车软卧，冰雪9日深度纯玩",jg:5580,name:"美景探索|乌鲁木齐",ts:"9天8晚" },
			]
		}
	}
}
</script>

<style scoped>
.jxtj{
	height: 5rem;
}
.jxtj .xj{
	text-align: center;
	line-height: 1.3rem;
}
.jxtj div:nth-child(1) img{
	width: 6%;
}
.jxtj div:nth-child(1) span{
	font-size: 0.4rem;
	font-weight: bold;
}
.jx{
	height: 10rem;
}
.jx .jx2{
	margin-left: 0.3rem;
	width: 45%;
	float: left;
	height: 4.5rem;
}
.jx2 a .div1{
	height: 2.3rem;
	border-radius: 0.1rem;
	position: relative;
	background-size: cover;
	background: center center no-repeat;
}
.jx2 a .div1 p{
	position: absolute;
	left: 0;
	top: 0.12rem;
	padding-left: 0.1rem;
	padding-right: 0.2rem;
	height: 0.42rem;
	line-height: 0.38rem;
	font-size: 0.22rem;
	color: white;
	border-radius: 0 0.16rem 0.16rem 0;
	background: rgba(0,0,0,0.6);
}
.jx2 a .div2{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-top: 0.1rem;
	padding: 0 0.1rem;
	height: 0.87rem;
	line-height: 0.44rem;
	font-size: 0.28rem;
	color: #000000;
	overflow: hidden;
}
.jx2 a div:nth-child(3){
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 0.2rem;
	padding: 0 0.1rem;
}
.float_left{
	color: gray;
	height: 0.2rem;
}
.float_left b:nth-child(1){
	color: #ff7100;
}
.float_left b:nth-child(2){
	font-weight: bold;
	color: #ff7100;
}
.float_right{
	color: gray;
}
</style>
